<template>
	<el-container>
		<el-header>
			<div class="left-panel">
<!--				<el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'system:post:add'"></el-button>-->
				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0" @click="batch_del"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="search.formName" placeholder="表单名称" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="formSearch"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<jdTable ref="table" :apiObj="apiObj" :params="search" row-key="id" @selection-change="selectionChange" stripe>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="类型" prop="formType" width="80" align="center">
					<template #default="scope">
						<span v-if="scope.row.formType == 1">
							<jd-icon-data-form style="width: 30px;"/>
						</span>
						<span v-if="scope.row.formType == 2">
							<jd-icon-audit-form style="width: 30px;"/>
						</span>
						<span v-if="scope.row.formType == 3">
							<jd-icon-search-form style="width: 30px;"/>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="表单名称" prop="formName" width="250"></el-table-column>
				<!-- <el-table-column label="表单类型" prop="formType">
					<template #default="scope">
						<DictTag :options="formTypeDict" :value="scope.row.formType"></DictTag>
					</template>
				</el-table-column> -->
				<el-table-column label="应用名称" prop="appName" width="250"></el-table-column>
				<el-table-column label="状态" prop="formStatus" align="center">
					<template #default="scope">
						<el-switch :model-value="scope.row.formStatus" @update:modelValue="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="0" inactive-value="1"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="150">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" @click="formModify(scope.row, scope.$index)" class="button">编辑</el-button>
							<el-popconfirm title="确定删除吗？" @confirm="formDelete(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="primary" class="button">删除</el-button>
								</template>
							</el-popconfirm>
						</el-button-group>
					</template>
				</el-table-column>
			</jdTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save = false"></save-dialog>
</template>

<script>

export default {
	name: "forms",
	components: {

	},
	data() {
		return {
			dialog: {
				save: false
			},
			apiObj: this.$API.app.form.list,
			selection: [],
			search: {
				keyword: null
			},
			form: {},
			permissionBtn: false,
			// 表单字典
			formTypeDict:[]
		}
	},
	mounted() {
		this.getDict();
		// 自动展开菜单
		this.$store.commit('TOGGLE_IsCollapse', false);
	},
	methods: {
		//添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		//编辑
		formModify(row) {
			let routeData = this.$router.resolve({
				path: '/app/store/design/form',
				query: {
					appId: row.appId,
					formId: row.id
				}
			})
			window.open(routeData.href, "_blank")
		},
		// 字典获取
		async getDict() {
			this.formTypeDict = await this.Dict.get("app_form_type");
		},
		//删除
		async formDelete(row) {
			var res =await this.$API.app.form.del.delete(row.id)
			if (res.code == 200) {
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.msg, "提示", { type: "error" })
			}
		},
		//批量删除
		async batch_del() {
			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, "提示", {
				type: "warning"
			})
				.then(async () => {
					let ids = this.selection.map((item) => item.id)
					var res = await this.$API.app.form.del.delete(ids)
					if (res.code == 200) {
						this.$refs.table.refresh()
						this.$message.success("操作成功")
					} else {
						this.$alert(res.msg, "提示", { type: "error" })
					}
					const loading = this.$loading()
					loading.close()
				})
				.catch(() => {})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection
		},
		//表格内开关
		async changeSwitch(val, row) {
			const oldStatus = row.formStatus
			row.formStatus = val
			row.$switch_status = true
			delete row.$switch_status
			this.form.id = row.id
			this.form.formStatus = val
			console.log(this.form)
			var res = await this.$API.app.form.changeStatus.put(this.form)
			if (res.code == 200) {
				this.$refs.table.refresh()
				this.$message.success("操作成功")
			} else {
				row.status = oldStatus
				this.$message.error(res.msg)
			}
		},
		//搜索
		formSearch() {

		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh()
			} else if (mode == "edit") {
				this.$refs.table.refresh()
			}
		}
	}
}
</script>

<style></style>
